<!--
 * @Description:
 * @Autor: zhang
 * @Date: 2020-11-12 17:17:52
 * @LastEditors: chenhl
 * @LastEditTime: 2021-03-26 15:59:03
-->
<template>
  <div>
    <!-- 热门榜单 -->
    <div class="backups-Top-list">
      <div class="top-list-title">星查查热门榜单</div>
      <TimeTabs
        :tabindex="tabindex"
        :time-list="timeList"
        :active-color="'#FF0929'"
        @tabClick="tabClick"
      />
      <div class="list-button-text float-right fz-12">
        更新时间: {{ updateTime }}
      </div>
    </div>
    <div class="flex flex-pack-justify">
      <div class="hotbox box-shadow">
        <div class="card-header flex flex-pack-justify">
          <div class="title">热门主播</div>
          <div class="flex">
            <span
              v-for="(item, index) in ancPlatformList"
              :key="index"
              class="text-platform"
              :class="ancPlatformIdx === index ? 'text-act-platform' : ''"
              @click="ancPlatform(item, index)"
            >
              {{ item.label }}
            </span>
          </div>
        </div>
        <div class="hot-anchor">
          <div class="theme-text-fu flex flex-pack-end">
            <div class="livetype">平台</div>
            <div class="sale-amount">销量</div>
            <div class="sale-volumn">销售额</div>
          </div>
          <div v-loading="ancLoading" class="data-area">
            <template v-if="anchorData.length">
              <router-link
                v-for="item in anchorData"
                :key="item.id"
                :to="{
                  name: 'hjAnchorDataDetail',
                  params: {
                    anchorId: item.anchorId,
                    platformType: item.platformType,
                  },
                }"
                target="_blank"
                class="item flex flex-align-center a_sham"
              >
                <div class="pr-10 flex">
                  <img
                    class="headerimg"
                    onerror="javascript:this.src='https://sf1-ttcdn-tos.pstatp.com/obj/ttfe/PNG/mcn-avatar.png'"
                    :src="item.anchorImg"
                    alt=""
                  >
                  <div class="text-left" style="width: 104px">
                    <p class="ellipsis anchor-name">
                      {{ item.anchorName }}
                    </p>
                    <p class="theme-text-fu" style="font-size: 12px">
                      {{ item.fansNum | f_number(1) }}粉丝
                    </p>
                  </div>
                </div>
                <div class="livetype">
                  <img
                    class="iconimg"
                    :src="item.platformType | platformType"
                    alt=""
                  >
                </div>
                <div class="sale-amount">
                  {{ item.totalSaleAmount | f_number(2) }}
                </div>
                <div class="sale-volumn">
                  {{ item.totalSaleVolume | f_number(2, { fen: true }) }}
                </div>
              </router-link>
            </template>
            <NoData v-else style="margin: 120px auto" />
          </div>
          <div class="more-btn">
            <router-link
              class="a_sham"
              :to="{
                path: '/anchor',
              }"
              target="_blank"
            >查看更多</router-link>
          </div>
        </div>
      </div>
      <div class="hotbox box-shadow">
        <div class="card-header flex flex-pack-justify">
          <div class="title">热门商品</div>
          <div class="flex">
            <span
              v-for="(item, index) in goodsPlatformList"
              :key="index"
              class="text-platform"
              :class="goodsPlatformIdx === index ? 'text-act-platform' : ''"
              @click="goodsPlatform(item, index)"
            >
              {{ item.label }}
            </span>
          </div>
        </div>
        <div class="hot-goods">
          <div class="theme-text-fu flex flex-pack-end">
            <div class="livetype">平台</div>
            <div class="sale-amount">销量</div>
            <div class="sale-volumn">销售额</div>
          </div>
          <div v-loading="goodsLoading" class="data-area">
            <template v-if="goodsData.length">
              <router-link
                v-for="item in goodsData"
                :key="item.id"
                :to="{
                  name: 'hjGoodsDataDetail',
                  params: { id: item.goodsId },
                }"
                target="_blank"
                class="item flex flex-align-center a_sham"
              >
                <div class="pr-10 flex flex-align-center relative">
                  <LiveIcon v-if="item.isIncludeVideoSlice" style="position: absolute;top:0;left:0;" />
                  <img
                    class="headerimg"
                    onerror="javascript:this.src='https://sf1-ttcdn-tos.pstatp.com/obj/ttfe/PNG/mcn-avatar.png'"
                    :src="item.goodsImg"
                    alt=""
                  >
                  <div class="name ellipsis2">{{ item.goodsName }}</div>
                </div>
                <div class="livetype">
                  <img
                    class="iconimg"
                    :src="item.goodsSource | platformType"
                    alt=""
                  >
                </div>
                <div class="sale-amount">
                  {{ item.totalSaleAmount | f_number(2) }}
                </div>
                <div class="sale-volumn">
                  {{ item.totalSaleVolume | f_number(2, { fen: true }) }}
                </div>
              </router-link>
            </template>
            <NoData v-else style="margin: 120px auto" />
          </div>
          <div class="more-btn">
            <router-link
              class="a_sham"
              :to="{
                name: 'hjGoodsDataList',
              }"
              target="_blank"
            >查看更多</router-link>
          </div>
        </div>
      </div>
      <div class="hotbox box-shadow">
        <div class="card-header flex flex-pack-justify">
          <div class="title">热门MCN</div>
        </div>
        <div class="hot-mcn">
          <div class="theme-text-fu flex flex-pack-end">
            <div class="sale-amount">销量</div>
            <div class="sale-volumn">销售额</div>
          </div>
          <div v-loading="organLoading" class="data-area">
            <template v-if="organData.length">
              <router-link
                v-for="item in organData"
                :key="item.id"
                :to="{
                  name: 'hjOrganDataDetail',
                  params: { id: 'w' + item.organId },
                }"
                target="_blank"
                class="item flex flex-align-center a_sham"
              >
                <div class="pr-10 flex">
                  <img
                    class="headerimg"
                    onerror="javascript:this.src='https://sf1-ttcdn-tos.pstatp.com/obj/ttfe/PNG/mcn-avatar.png'"
                    :src="item.organImg"
                    alt=""
                  >
                  <div class="text-left" style="width: 135px">
                    <p class="ellipsis organ-name">
                      {{ item.organName }}
                    </p>
                    <p class="theme-text-fu" style="font-size: 12px">
                      {{ item.fansNum | f_number(1) }}粉丝
                    </p>
                  </div>
                </div>
                <div class="sale-amount">
                  {{ item.totalSaleAmount | f_number(2) }}
                </div>
                <div class="sale-volumn">
                  {{ item.totalSaleVolume | f_number(2, { fen: true }) }}
                </div>
              </router-link>
            </template>
            <NoData v-else style="margin: 120px auto" />
          </div>
          <div class="more-btn">
            <router-link
              class="a_sham"
              :to="{
                name: 'hjOrganDataList',
              }"
              target="_blank"
            >查看更多</router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    updateTime: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tabindex: 4,
      diffDay: 30,
      timeList: [
        { label: '昨日', value: 1 },
        { label: '3天', value: 3 },
        { label: '7天', value: 7 },
        { label: '15天', value: 15 },
        { label: '30天', value: 30 }
      ],
      ancPlatformIdx: 0,
      ancPlatformVal: null,
      ancPlatformList: [
        {
          label: '全部',
          value: null
        },
        {
          label: '淘宝',
          value: 1
        },
        {
          label: '抖音',
          value: 2
        }
        // {
        //   label: '快手',
        //   value: 11
        // }
      ],
      goodsPlatformIdx: 0,
      goodsPlatformVal: null,
      goodsPlatformList: [
        {
          label: '全部',
          value: null
        },
        {
          label: '淘宝',
          value: 1
        },
        {
          label: '抖音',
          value: 2
        }
      ],
      ancLoading: false,
      goodsLoading: false,
      organLoading: false,
      anchorData: [],
      goodsData: [],
      organData: []
    }
  },
  created() {
    this.getAnchorData()
    this.getGoodsData()
    this.getMcnData()
  },
  methods: {
    getAnchorData() {
      this.ancLoading = true
      this.$home
        .homeAnchorHot({
          diffDay: this.diffDay,
          limit: 5,
          platformType: this.ancPlatformVal
        })
        .then(({ data }) => {
          this.anchorData = data
        })
        .finally(() => {
          this.ancLoading = false
        })
    },
    getGoodsData() {
      this.goodsLoading = true
      this.$home
        .homeGoodsHot({
          diffDay: this.diffDay,
          limit: 5,
          platformType: this.goodsPlatformVal
        })
        .then(({ data }) => {
          this.goodsData = data
        })
        .finally(() => {
          this.goodsLoading = false
        })
    },
    getMcnData() {
      this.organLoading = true
      this.$home
        .homeOrganHot({
          diffDay: this.diffDay,
          limit: 5
        })
        .then(({ data }) => {
          this.organData = data
        })
        .finally(() => {
          this.organLoading = false
        })
    },
    tabClick(item, index) {
      this.tabindex = index
      this.diffDay = item.value
      this.getAnchorData()
      this.getGoodsData()
      this.getMcnData()
    },
    ancPlatform(item, index) {
      this.ancPlatformIdx = index
      this.ancPlatformVal = item.value
      this.getAnchorData()
    },
    goodsPlatform(item, index) {
      this.goodsPlatformIdx = index
      this.goodsPlatformVal = item.value
      this.getGoodsData()
    },
    linkTo(name) {
      this.$router.push({ name })
    },
    linkToHjAnchorDetail(item) {
      const url = this.$router.resolve({
        name: 'hjAnchorDataDetail',
        params: {
          anchorId: item.anchorId,
          platformType: item.platformType
        }
      })
      window.open(url.href, '_blank')
    },
    linkToHjGoodsDetail(id) {
      const url = this.$router.resolve({
        name: 'hjGoodsDataDetail',
        params: { id }
      })
      window.open(url.href, '_blank')
    },
    linkToHjOrganDetail(id) {
      const url = this.$router.resolve({
        name: 'hjOrganDataDetail',
        params: { id: 'w' + id }
      })
      window.open(url.href, '_blank')
    }
  }
}
</script>

<style lang="scss" scoped>
.backups-Top-list {
  text-align: center;
  height: 100px;
  position: relative;
  .top-list-title {
    margin: 28px auto 16px;
    font-size: 24px;
    font-weight: 500;
    color: #333333;
  }
  .list-button-text {
    color: #999999;
    position: absolute;
    bottom: 28px;
    right: 0;
  }
}
.hotbox {
  background: #ffffff;
  height: 433px;
  width: 393px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
  border-radius: 12px;
}
.card-header {
  height: 50px;
  width: 357px;
  margin: 0 auto;
  line-height: 50px;
  border-bottom: 1px solid #f4f4f4;
  .title {
    font-weight: 500;
    margin-left: 18px;
    position: relative;
    &::before {
      content: "";
      width: 6px;
      height: 15px;
      border-radius: 3px;
      display: block;
      background: #ff0929;
      position: absolute;
      left: -18px;
      top: 18px;
    }
  }
  .text-platform {
    margin-left: 18px;
    font-size: 13px;
    cursor: pointer;
    &:hover {
      color: #ff0929;
    }
  }
  .text-act-platform {
    color: #ff0929;
    position: relative;
    &::after {
      content: "";
      position: absolute;
      width: 20px;
      left: calc(50% - 10px);
      bottom: 12.5px;
      height: 1px;
      background: #ff0929;
      border-radius: 1px;
    }
  }
}
.data-area {
  width: 100%;
  height: 285px;
  overflow: hidden;
}
.more-btn {
  width: 149px;
  height: 36px;
  border: 1px solid #e2e2e2;
  text-align: center;
  line-height: 36px;
  color: #84878c;
  margin: 10px auto 0;
  cursor: pointer;
  border-radius: 4px;
  &:hover {
    color: #ff0929;
    border-color: #ff0929;
  }
}
.livetype {
  width: 45px;
  height: 20px;
  text-align: center;
  .iconimg {
    width: 20px;
    height: 20px;
  }
}
.hot-anchor {
  padding: 14px 18px 18px 18px;
  text-align: center;
  .sale-amount {
    width: 70px;
  }
  .sale-volumn {
    width: 70px;
  }
  .item {
    height: 57px;
    cursor: pointer;
    .headerimg {
      width: 44px;
      height: 43px;
      border-radius: 50%;
      margin-right: 14px;
    }
  }
  .anchor-name {
    margin: 5px 0 6px 0;
    &:hover {
      color: #ff0929;
    }
  }
}
.hot-goods {
  padding: 14px 18px 18px 18px;
  text-align: center;
  .sale-amount {
    width: 70px;
  }
  .sale-volumn {
    width: 70px;
  }
  .item {
    height: 57px;
    cursor: pointer;
    .name {
      width: 104px;
      height: 36px;
      line-height: 18px;
      text-align: left;
      &:hover {
        color: #ff0929;
      }
    }
    .headerimg {
      width: 44px;
      height: 44px;
      border-radius: 4px;
      margin-right: 14px;
    }
  }
}
.hot-mcn {
  padding: 14px 18px 18px 18px;
  text-align: center;
  .sale-amount {
    width: 77px;
  }
  .sale-volumn {
    width: 77px;
  }
  .item {
    height: 57px;
    cursor: pointer;
    .headerimg {
      width: 44px;
      height: 43px;
      border-radius: 50%;
      margin-right: 14px;
    }
  }
  .organ-name {
    margin: 5px 0 6px 0;
    &:hover {
      color: #ff0929;
    }
  }
}
</style>
